<template>
  <div class="app-container">
    <el-config-provider :locale="zhCn" :size="size" :z-index="3000">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// App.vue是应用的根组件
const size = ref('default') // 全局默认组件大小
</script>

<style>
/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  font-size: 14px;
  background-color: #f5f7fa;
}

#app {
  height: 100%;
}

.app-container {
  height: 100%;
}

/* 通用样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-left h2 {
  margin: 0;
}

/* 表格样式优化 */
.el-table th {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: bold;
}

/* 卡片样式优化 */
.el-card {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* 分页样式 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 表单样式 */
.form-card {
  margin-bottom: 20px;
}

/* 代码块样式 */
.code-block {
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 10px;
  overflow: auto;
  max-height: 400px;
}

.code-block pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>